<template>
  <div class="app-container">
    <div class="inputBox">
      <el-input v-model="search.cashOrderNum" class="input" placeholder="请输入单号查询" />
      <el-input v-model="search.orderNum" class="input" placeholder="请输入订单编号查询" />
      <el-input v-model="search.teacherName" class="input" placeholder="请输入申请人查询" />
      <el-input v-model="search.mobilePhone" class="input" placeholder="请输入申请人手机号查询" />
      <el-date-picker v-model="search.startTime" class="startDate" type="date" placeholder="选择开始日期"/>
      <el-date-picker v-model="search.endTime" class="endDate" type="date" placeholder="选择结束日期"/>
      <el-select v-model="search.status" class="teacherStatus" placeholder="请选择提现状态">
        <el-option label="待审核" value="0" />
        <el-option label="待放款" value="1" />
        <el-option label="已放款" value="2" />
        <el-option label="已驳回" value="3" />
      </el-select>
      <el-button type="primary" class="ml10" @click="toSearch">查询</el-button>
      <el-button type="primary" @click="toReset">重置</el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="加载中请稍后"
      border
      fit
      highlight-current-row>
      <el-table-column align="center" label="单号" width="100">
        <template slot-scope="scope">
          {{ scope.row.cashOrderNum }}
        </template>
      </el-table-column>
      <el-table-column label="订单编号" width="80">
        <template slot-scope="scope">
          {{ scope.row.orderNum }}
        </template>
      </el-table-column>
      <el-table-column label="申请人">
        <template slot-scope="scope">
          {{ scope.row.teacher.name }}
        </template>
      </el-table-column>
      <el-table-column label="退佣金金额">
        <template slot-scope="scope">
          {{ scope.row.amount }}
        </template>
      </el-table-column>
      <el-table-column label="申请人手机号" width="110">
        <template slot-scope="scope">
          {{ scope.row.teacher.mobilePhone }}
        </template>
      </el-table-column>
      <el-table-column label="申请时间" width="95">
        <template slot-scope="scope">
          {{ scope.row.createTime | formatDate }}
        </template>
      </el-table-column>
      <el-table-column label="退款账号类型">
        <template slot-scope="scope">
          {{ scope.row.bankCardInfo.bankName }}
        </template>
      </el-table-column>
      <el-table-column label="退款账号" width="140">
        <template slot-scope="scope">
          <!-- {{ scope.row.bankCardInfo.bankCard | hideBankCard }} -->
          {{ scope.row.bankCardInfo.bankCard }}
        </template>
      </el-table-column>
      <el-table-column label="收款人" width="80">
        <template slot-scope="scope">
          {{ scope.row.bankCardInfo.name }}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="70">
        <template slot-scope="scope">
          <p>{{ scope.row.status|typeStr }}</p>
        </template>
      </el-table-column>
      <el-table-column label="备注">
        <template slot-scope="scope">
          {{ scope.row.remark }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="操作" width="290">
        <template slot-scope="scope">
          <el-button
            v-show="permissionShow && permissionBoolean('详情')"
            v-if="scope.row.status==0 || scope.row.status==1 || scope.row.status==2 || scope.row.status==3"
            size="mini"
            type="warning"
            @click="detail(scope.$index)">详情</el-button>
          <el-button
            v-show="permissionShow && permissionBoolean('备注')"
            v-if="scope.row.status==0 || scope.row.status==1"
            size="mini"
            type="success"
            @click="changeRemarks(scope.row.id, scope.$index)">备注</el-button>
          <el-button
            v-show="permissionShow && permissionBoolean('查看备注')"
            v-if="scope.row.status==2 || scope.row.status==3"
            size="mini"
            type="success"
            @click="checkRemark(scope.row.id, scope.$index)">查看备注</el-button>
          <el-button
            v-show="permissionShow && permissionBoolean('审核')"
            v-if="scope.row.status==0"
            size="mini"
            type="success"
            @click="waitCheck(scope.row.id)">审核</el-button>
          <el-button
            v-show="permissionShow && permissionBoolean('驳回')"
            v-if="scope.row.status==0"
            size="mini"
            type="danger"
            @click="rejectFn(scope.row.id)">驳回</el-button>
          <el-button
            v-show="permissionShow && permissionBoolean('打款')"
            v-if="scope.row.status == 1"
            size="mini"
            type="success"
            @click="getCash(scope.row.id)">打款</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
    <detail :detialvisible.sync="dialogTableVisible" :dialogdata.sync="list" :myindex.sync="detailIndex" :detail-mode="'refund'" />
    <!-- <remark :remark-list="remarkList" :remark-visible.sync="remarkVisible" :remark-index="remarkIndex" /> -->
    <remarkPropt
      ref="remarke"
      :remark-propt-list="remarkProptList"
      :remark-propt-visible.sync="remarkProptVisible"
      :remark-propt-index="remarkProptIndex"
      :cash-type="cashType"
      @remarkText="remarkText" />
  </div>
</template>

<script>
import { teacherCashRecordUpdate, checkRemark, teacherCashRecord, getUserMessage } from '@/api/financial'
import Pagination from '@/components/Pagination'
import { Message } from 'element-ui'
import { GetQiniuToken } from '@/utils/qiniuUpload.js'
import detail from '@/components/detail'
import remark from '@/components/remark'
import remarkPropt from '@/components/remark/remarkPrompt'
import { getByteLength } from '@/utils/validate'
import { getLocalUid, setLocalUid, getLocalId, setLocalId } from '@/utils/uid'
import { getPermission } from '@/api/permission'
const inputValidatorNum = (v) => {
  if (getByteLength(v) > 600) {
    return false
  }
}

export default {
  components: { Pagination, detail, remark, remarkPropt },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    },
    typeStr(type) {
      const typesMap = {
        0: '待审核',
        1: '待放款',
        2: '已放款',
        3: '已驳回'
      }
      return typesMap[type]
    }
  },
  data() {
    return {
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        pageNum: 1,
        pageSize: 10
      },
      search: {
        type: 1,
        cashOrderNum: '',
        orderNum: '',
        teacherName: '',
        mobilePhone: '',
        startTime: '',
        endTime: '',
        status: ''
      },
      isShowDel: false,
      temp: {
        status: ''
      },
      dialogFormVisible: false,
      courseTypeId: null,
      course: {
        name: '',
        introduce: '',
        price: '',
        imgUrl: ''
      },
      fileList: [],
      imgSrc: '',
      actionUrl: 'https://upload-z2.qiniup.com',
      isEdit: false,
      uploadData: {
        key: '',
        token: ''
      },
      dialogTableVisible: false,
      detailList: [],
      formLabelWidth: '120px',
      detailIndex: -1,
      remarkVisible: false,
      remarkList: [],
      remarkIndex: -1,
      cashType: 2, // type 1. 提现 2.打款
      remarkProptVisible: false,
      remarkProptList: [],
      remarkProptIndex: -1,
      permissionShow: false, // 权限数据未到达之前按钮隐藏
      permissionList: [] // 权限数据列表
    }
  },
  computed: {
    permissionBoolean() {
      return function(str) {
        const arr = []
        for (let i = 0; i < this.permissionList.length; i++) {
          arr.push(this.permissionList[i].name)
        }
        const index = arr.indexOf(str)
        // console.log(arr)
        // console.log('index', index, str)
        if (index !== -1) {
          return true
        } else {
          return false
        }
      }
    }
  },
  watch: {
    'permissionList'(newVal) {
      this.permissionList = newVal
      this.permissionShow = true
    }
  },
  created() {
    this.fetchData()
    this.getPermissonFn()
  },
  mounted() {},
  methods: {
    // 权限数据的获取
    getPermissonFn() {
      const id = getLocalId()
      const uid = getLocalUid()
      const data = { uid }
      getPermission(id, data).then(res => {
        console.log('权限结果', res)
        if (res.code === '200') {
          this.permissionList = res.data
          // console.log('权限名称：', this.getPermissionName(this.permissionList))
        } else {
          Message.error(res.message + '-' + res.data)
        }
      })
    },
    // 查看备注后关闭的方法
    remarkText(value) {
      this.fetchData()
    },
    // 查询
    toSearch() {
      if (!this.search.startTime) this.search.startTime = ''
      if (!this.search.endTime) this.search.endTime = ''
      this.search.startTime = new Date(this.search.startTime).getTime();
      this.search.endTime = new Date(this.search.endTime).getTime();
      this.listLoading = true
      const newData = this.objectCon(this.listQuery, this.search)
      teacherCashRecord(this.cashType, newData).then(response => {
        this.list = response.data.list
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    // 重置
    toReset() {
      this.search.cashOrderNum = ''
      this.search.orderNum = ''
      this.search.teacherName = ''
      this.search.mobilePhone = ''
      this.search.startTime = ''
      this.search.endTime = ''
      this.search.status = ''
      this.search.pageNum = 0
      this.search.pageSize = 10
    },
    // 备注
    changeRemarks(id, index) {
      this.remarkProptIndex = index
      console.log('--->', id)
      let userData = ''
      // 先获取个人信息
      this.remarkProptVisible = true
      this.$refs.remarke.request(id)
      // console.log('==>'+JSON.stringify(this))
      checkRemark(id).then(res => {
        userData = res.data
        // console.log(userData)
        this.remarkProptList = userData
        this.remarkProptVisible = true
      })
    },
    // 备注
    // changeRemarks(id) {
    //   this.$prompt('请输入备注', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消'
    //   }).then(({ value }) => {
    //     const data = { id, remark: value, type: this.cashType } // type1. 提现 2.打款
    //     teacherCashRecordUpdate(data).then(res => {
    //       if (res.code === '200') {
    //         this.fetchData();
    //         this.$message({
    //           type: 'success',
    //           message: '备注修改成功'
    //         });
    //       }
    //     })
    //   }).catch(() => {
    //     this.$message({
    //       type: 'info',
    //       message: '取消输入'
    //     })
    //   })
    // },
    // 驳回
    rejectFn(id) {
      this.$prompt('请输入驳回理由', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValidator: inputValidatorNum,
        inputErrorMessage: '最多输入200个字符'
      }).then(({ value }) => {
        const data = { id, status: 3, type: this.cashType, remark: value } // type1. 提现 2.打款
        teacherCashRecordUpdate(data).then(res => {
          if (res.code === '200') {
            this.fetchData();
            this.$message({
              type: 'success',
              message: '已驳回!'
            });
          } else {
            Message.error(res.message + '-' + res.data)
            this.fetchData();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        })
      })
    },
    // 点击审核 - 待审核：点击审核按钮，审核通过后，状态变为“待放款”
    waitCheck(id) {
      this.$confirm('提款请求是否审核通过？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = { id, status: 1, type: this.cashType } // type1. 提现 2.打款
        teacherCashRecordUpdate(data).then(res => {
          if (res.code === '200') {
            this.fetchData();
            this.$message({
              type: 'success',
              message: '审核成功!'
            });
          } else {
            Message.error(res.message + '-' + res.data)
            this.fetchData();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消审核'
        })
      })
    },
    fetchData() {
      this.listLoading = true
      const newData = this.objectCon(this.listQuery, this.search)
      teacherCashRecord(this.cashType, newData).then(response => {
        console.log(response.data.list)
        this.list = response.data.list
        // this.list[0].status = 0
        this.total = response.data.total
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    // 查看备注
    checkRemark(id, index) {
      checkRemark(id).then(res => {
        if (res.code === '200') {
          this.remarkList = res.data
          if (this.remarkList.length) {
            this.remarkVisible = true
            this.remarkIndex = index
          } else {
            this.$message('暂无备注');
          }
        }
      })
    },
    // 打款
    getCash(id) {
      this.$confirm('是否确认打款?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = { id, status: 2, type: this.cashType } // type1. 提现 2.打款
        teacherCashRecordUpdate(data).then(res => {
          if (res.code === '200') {
            this.fetchData();
            this.$message({
              type: 'success',
              message: '打款成功!'
            });
          } else {
            Message.error(res.message + '-' + res.data)
            this.fetchData();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消打款'
        })
      })
    },
    // 点击详情
    detail(index) {
      this.detailIndex = index
      this.dialogTableVisible = true
    },
    addCourse(courseTypeId) {
      this.$data.courseTypeId = courseTypeId
      this.$data.dialogFormVisible = true
    },
    getValue(value) {
      this.$data.temp.status = value
    },
    getEnable(value) {
      this.$data.course.isEnable = value
    },
    getChildren(value) {
      this.$data.course.courseList = value
    },
    addCourseType() {
      this.$router.push({
        path: 'add',
        query: { isEdit: false }
      })
    },
    editRow(pid) {
      const _this = this;
      const object = Object.assign({ isEdit: true }, _this.$data.list[pid])
      this.$router.push({
        path: 'add',
        query: object
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .el-icon-remove {
    margin-left: 10px;
  }
  .img_url {
    width: 110px;
    height: 110px;
  }
  .inputBox{
    div{ margin-bottom: 10px;}
    .input:nth-of-type(1){ width: 160px;}
    .input:nth-of-type(2){ width: 140px;}
    .input:nth-of-type(3){ width: 160px;}
    .teacherType { width: 150px;}
    .teacherSex { width: 120px;}
    .startDate { width: 150px;}
    .endDate { width: 150px;}
    .teacherStatus { width: 150px;}
  }
</style>
